<template>
  <div class="product_type">
    <el-table
      :data="proTypeTable"
      style="width: 100%"
      row-key="id"
    >
      <el-table-column prop="name" label="名称" ></el-table-column>
       <el-table-column prop="sortIndex" label="排序" ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="160">
        <template slot-scope="scope">
          <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="addChildrenClick(scope.row)" type="text" size="small">添加子项</el-button>
          <el-popconfirm
            popper-class="del_pop"
            title="这是一段内容确定删除吗？"
            @onConfirm="delClick(scope.row)"
          >
            <el-button class="del_btn"  slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <proTypeAddEdit :type="popType" @addChildren="addChildrenSubmit" @edit="editSubmit" ref="proTypeAddEdit" @add="addTypeSubmit"></proTypeAddEdit>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
import proTypeAddEdit from '../components/pro-type-add-edit'
export default {
  name: "product-type",
  data(){
    return {
      popType:'add',  //子组件类型
      proTypeTable:[
        {
          id:'1',
          name:'面部护理',
          sortIndex:1,
          children:[
            {
              id:'1-1',
              name:'洁面',
              sortIndex:0,
            },{
              id:'1-2',
              name:'蒸汽喷雾',
              sortIndex:1,
            },{
              id:'1-3',
              name:'面部去角质',
              sortIndex:2,
            },{
              id:'1-4',
              name:'面膜',
              sortIndex:3,
            }
          ]
        },
        {
          id:'2',
          name:'眼部护理',
          sortIndex:0,
          children:[
            {
              id:'2-1',
              name:'清洁',
              sortIndex:0,
            },{
              id:'2-2',
              name:'柔肤',
              sortIndex:0,
            },{
              id:'2-3',
              name:'按摩',
              sortIndex:0,
            },{
              id:'2-4',
              name:'润肤',
              sortIndex:0,
            }
          ]
        },
        {
          id:'3',
          name:'肩颈护理',
          sortIndex:2,
          children:[
            {
              id:'3-1',
              name:'清洁',
              sortIndex:1,
            },{
              id:'3-2',
              name:'按摩',
              sortIndex:2,
            },{
              id:'3-3',
              name:'敷膜或仪器',
              sortIndex:0,
            }
          ]
        },
        {
          id:'4',
          name:'身体护理',
          sortIndex:3
        },
        {
          id:'5',
          name:'手部护理',
          sortIndex:3
        },
        {
          id:'6',
          name:'足部护理',
          sortIndex:3,
        }
      ]
    }
  },
  components:{
    proTypeAddEdit
  },
  created(){
    this.init()
  },
  computed:{  
    ...mapGetters({
      
    }),
    
   
  },
  methods:{
    ...mapMutations({

    }),
    ...mapActions({

    }),
    init(){
      // console.log('init..protype')
      this.typeSort(this.proTypeTable);
      // console.log(this.proTypeTable,'sort后')
    },
    //整个表格数据根据sortIndex排序,每次添加编辑之后都调用init(),重新拉取数据 假数据调用排序，一般排序由后台接口完成
    //递归排序
    typeSort(arr){
      arr.forEach(e => {
        if(e.children&&e.children.length){
          this.typeSort(e.children);
        }else{
          arr.sort((a,b)=>{
            if(a.sortIndex == b.sortIndex){
              return a.id - b.id
            }else{
              return a.sortIndex - b.sortIndex
            }
          })
        }
      });
     
    },
    //添加类别打开
    addType(){
      this.popType='add';
      let opt={
        title:'新增产品类别',
        label:'类别名称'
      }
      this.$nextTick(()=>{
        this.$refs.proTypeAddEdit.open(opt);
      })
    },
    //新增产品类别保存
    addTypeSubmit(data){
      this.proTypeTable.push({
        name:data.name,
        sortIndex:data.sortIndex,
        id:data.id,
        children:null
      })
      this.$message({
        type:'success',
        message:'添加成功'
      })
      this.init()
    },
    //编辑之后 根据id替换掉数组中对应数据
    //通过id判断是编辑还是添加子类做不同处理
    editFindId(arr,data,id=''){
      let findId=id||data.id
      for (let i = 0; i < arr.length; i++) {
        if(arr[i].id==findId){
          if(id){
            if(!(arr[i].children&&arr[i].children.length)){
              arr[i].children=[]
            }
            arr[i].children.push({
              name:data.name,
              sortIndex:data.sortIndex,
              id:data.id,
              children:null
            })
            this.init()
          }else{
            arr[i].name=data.name;
            if(arr[i].sortIndex!=data.sortIndex){
              arr[i].sortIndex=data.sortIndex
              this.init()
            }
          }
          return 
        }else{
          if(arr[i].children&&arr[i].children.length){
            this.editFindId(arr[i].children,data,id); 
          }
        }
      }
      
    },
    //编辑产品类别保存
    editSubmit(data){
      //需要遍历整个数组找到对应id并且替换掉
      this.editFindId(this.proTypeTable,data);
      this.$message({
        type:'success',
        message:'修改成功'
      })
    },
    //新增子类
    addChildrenSubmit(data,id){
      //需要和编辑一样遍历找到对应得数据并且给他添加一个子级
      // console.log(data,id);
      this.editFindId(this.proTypeTable,data,id);
      this.$message({
        type:'success',
        message:'添加成功'
      })
    },
    //编辑
    editClick(e){
      this.popType='edit';
      let opt={
        title:'编辑产品类别',
        label:'类别名称',
        opt:{
          id:e.id,
          name:e.name,
          sortIndex:e.sortIndex
        }
      }
      this.$nextTick(()=>{
        this.$refs.proTypeAddEdit.open(opt);
      })
    },
    //添加子项
    addChildrenClick(e){
      this.popType='addChildren';
      let opt={
        title:'新增子项类别',
        label:'子项类别',
        opt:{
          id:e.id
        }
      }
      this.$nextTick(()=>{
        this.$refs.proTypeAddEdit.open(opt);
      })
    },
    //删除
    delClick(e){
      
    }
  },
}
</script>
<style lang="scss" scoped>
.product_type{
  ::v-deep .el-table{
    .del_btn{
       margin-left: 10px;
        background: transparent;
        border: none;
        padding: 9px 0;
        span{
          color: #3a8ee6;
          font-size: 12px;
        }
    }
    .el-table__body-wrapper{
      .el-table__row{
        // user-select: none; //禁止用户选中
      }
    }
  }
}


</style>